<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from "vue";
import { ElMessage } from "element-plus";
import { UserQuery, UserSave, UserDelete } from "../../api/user";
import { InfoFilled } from '@element-plus/icons-vue'

const dialogVisible = ref(false);

const open = async () => {
  await getList();
  dialogVisible.value = true;
};
defineExpose({ open });

const list = ref<any[]>([]);

const addRow = () => {
  list.value.push({
    fID: 0,
    Name: "",
  });
  const row = list.value[list.value.length - 1];
  editData.value = JSON.parse(JSON.stringify(row)); //把当前行数据存一份，取消的时候行数据还原
  editId.value = row.FID;
};

const editData = ref([]);
const editId = ref("");

const delRow = async (row: any) => {
  const post = {
    operNumber: localStorage.getItem('USER_ID'),
    ...row,
  };
  const res = (await UserDelete(post)) as any;
  if (res.code !== 200) {
    ElMessage.error(res.msg);
    return;
  }
  ElMessage.success(res.msg);
  editId.value = "";
  // 刷新列表
  await getList();
};
function cancelClick(row: any) {
  // debugger
  if (row.FID) {
    for (let i in row) {
      row[i] = unref(editData)[i];
    }
    editId.value = "";
  } else {
    list.value.forEach((item: any, index) => {
      if (item.fID == 0) {
        list.value.splice(index, 1);
      }
    });
  }
}
async function saveClick(row: any) {
  const post = {
    operNumber: localStorage.getItem('USER_ID'),
    ...row,
  };
  const res = (await UserSave(post)) as any;
  if (res.code !== 200) {
    ElMessage.error(res.msg);
    return;
  }
  ElMessage.success(res.msg);
  editId.value = "";
  // 刷新列表
  await getList();
}
function changeClick(row: any) {
  if (
    unref(list).some((item: any) => {
      return item.iIndex == "";
    })
  ) {
    ElMessage.warning("请先保存");
    return;
  }
  editData.value = JSON.parse(JSON.stringify(row)); //把当前行数据存一份，取消的时候行数据还原
  editId.value = row.FID;
}
const getList = () => {
  UserQuery().then((res: any) => {
    if (res.code !== 200) {
      ElMessage.warning(res.msg);
      return;
    }
    list.value = res.data;
  });
};

onMounted(() => getList());
</script>
<template>
  <!-- 用户管理窗口 -->
  <el-dialog
    class="my-dialog"
    v-model="dialogVisible"
    width="1000px"
    top="260px"
    title="用户管理"
  >
    <el-button type="primary" plain size="large" @click="addRow">
      新增
    </el-button>
    <el-table class="mt-2" :data="list" height="500" style="width: 100%">
      <el-table-column
        align="center"
        label="序号"
        type="index"
        :index="
          (index) => {
            return index + 1;
          }
        "
        show-overflow-tooltip
        width="60"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="Number"
        label="工号"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-input
            v-if="scope.row.FID == editId"
            v-model="scope.row.Number"
            placeholder="请输入工号"
          />
          <span v-else>{{ scope.row.Number }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-input
            v-if="scope.row.FID == editId"
            v-model="scope.row.Name"
            placeholder="请输入姓名"
          />
          <span v-else>{{ scope.row.Name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="Level"
        label="等级"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-select
            v-model="scope.row.Level"
            :disabled="scope.row.FID !== editId"
          >
            <el-option key="2" label="普通" value="2">普通</el-option>
            <el-option key="1" label="管理员" value="1">管理员</el-option>
            <el-option key="3" label="超级管理员" value="3">超级管理员</el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" show-overflow-tooltip>
        <template #default="scope">
          <el-button
            v-if="scope.row.FID != editId"
            type="primary"
            link
            @click="changeClick(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="warning"
            v-if="scope.row.FID == editId"
            @click="saveClick(scope.row)"
            >保存</el-button
          >
          <el-button
            link
            v-if="scope.row.FID == editId"
            @click="cancelClick(scope.row)"
            >取消</el-button
          >
          <!-- <el-button type="danger" link @click="delRow(scope.row)">
            删除
          </el-button> -->
          <el-popconfirm
            v-if="scope.row.FID !== editId"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确定删除吗"
            @confirm="delRow(scope.row)"
          >
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="close-btn flex justify-end pt-4">
      <el-button size="large" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>
